<template>
    <div class="main-container">
        <TableBody>
            <template #header>
                <div class="line-menu">
                    <a-menu mode="horizontal" :default-selected-keys="['1']">
                        <a-menu-item key="1">线路报障</a-menu-item>
                        <a-menu-item key="2">设备报障</a-menu-item>
                        <a-menu-item key="3">链路报障</a-menu-item>
                    </a-menu>
                </div>

                <a-divider type="vertical" style="background-color: #f5f5f5;margin-top:0px ;" />
            </template>
            <template #default>
                <a-row class="grid-demo" style="margin-bottom:10px">
                    <a-col :span="6">
                        <div>
                            <a-input placeholder="查询线路名/报障人/负责人/供应商" allow-clear />
                        </div>
                    </a-col>
                    <a-col :span="6">
                        <div style="width: 40%; margin-left: 20px;display: inline-block;">
                            <a-select placeholder="工单状态">
                                <a-option>Beijing</a-option>
                                <a-option>Shanghai</a-option>
                                <a-option>Guangzhou</a-option>
                                <a-option disabled>Disabled</a-option>
                            </a-select>
                        </div>
                        <div style="width: 40%; margin-left: 20px;display: inline-block;">
                            <a-select placeholder="报障类型">
                                <a-option>Beijing</a-option>
                                <a-option>Shanghai</a-option>
                                <a-option>Guangzhou</a-option>
                                <a-option disabled>Disabled</a-option>
                            </a-select>
                        </div>
                    </a-col>
                    <a-col :span="6">
                        <div style="display:inline-block">
                            <span style="width: 20%;margin-right:3% ;">创建时间</span>
                            <a-range-picker
                                style="width: 77%; "
                                show-time
                                :time-picker-props="{ defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('09:09:06', 'HH:mm:ss')] }"
                                format="YYYY-MM-DD HH:mm"
                                @change="onChange"
                                @select="onSelect"
                                @ok="onOk"
                            />
                        </div>
                    </a-col>
                    <a-col :span="6">
                        <div style="margin-left:10px;display:inline-block">
                            <a-button type="primary">
                                <template #icon>
                                    <icon-search />
                                </template>
                                <!-- Use the default slot to avoid extra spaces -->
                                <template #default>查询</template>
                            </a-button>
                        </div>
                        <div style="margin-left:15px;display:inline-block">
                            <a-switch />
                            <span style="margin-left:10px ;">自动刷新</span>
                        </div>
                        <div style="margin-left:15px;display:inline-block">
                            <SortableTable
                                class="ml-4"
                                :columns="tableColumns"
                                @update="onUpdateTable"
                            />
                        </div>
                    </a-col>
                </a-row>

                <a-table
                    :loading="tableLoading"
                    :bordered="{ wrapper: bordered, cell: bordered }"
                    :stripe="striped"
                    :data="dataList"
                    :pagination="false"
                    :row-key="rowKey"
                    :row-class-name="rowClassNameFun"
                >
                    <template #columns>
                        <a-table-column
                            v-for="item of tableColumns"
                            :key="item.key"
                            :align="item.align"
                            :title="item.title"
                            :width="item.width"
                            :data-index="item.key"
                            :fixed="item.fixed"
                        >
                            <template
                                v-if="item.key === 'ID'"
                                #cell="{ rowIndex }"
                            >{{ rowIndex + 1 }}</template>
                            <template
                                v-else-if="item.key === 'linkName'"
                                #cell="{ record }"
                            >{{ record.linkName }}</template>

                            <template v-else-if="item.key === 'state'" #cell="{ record }">
                                <a-tag color="green" size="small" v-if="record.state === 1">已完成</a-tag>
                                <a-tag color="blue" size="small" v-else-if="record.state === 0">进行中</a-tag>
                                <a-tag color="red" size="small" v-else>失败</a-tag>
                            </template>
                            <template v-else-if="item.key === 'level'" #cell="{ record }">
                                <span
                                    :style="'color:'+Filter(record.level)"
                                >{{ 'P' + record.level }}</span>
                            </template>
                            <template v-else-if="item.key === 'vendor'" #cell="{ record }">
                                <span>{{ record.vendor }}</span>
                            </template>
                            <template v-else-if="item.key === 'type'" #cell="{ record }">
                                <span>{{ record.type }}</span>
                            </template>
                            <template v-else-if="item.key === 'creator'" #cell="{ record }">
                                <span>{{ record.creator }}</span>
                            </template>
                            <template v-else-if="item.key === 'responser'" #cell="{ record }">
                                <span>{{ record.responser }}</span>
                            </template>
                            <template v-else-if="item.key === 'creatTime'" #cell="{ record }">
                                <span>{{ record.creatTime}}</span>
                            </template>
                            <template v-else-if="item.key === 'beginTime'" #cell="{ record }">
                                <span>{{ record.beginTime}}</span>
                            </template>
                            <template v-else-if="item.key === 'endTime'" #cell="{ record }">
                                <span>{{ record.endTime}}</span>
                            </template>
                            <template v-else-if="item.key === 'operation'" #cell="{ record }">
                                <icon-heart-fill @click="write(record)" />
                            </template>
                        </a-table-column>
                    </template>
                </a-table>
            </template>

            <template #footer>
                <TableFooter :pagination="pagination" position="end" />
            </template>
        </TableBody>
    </div>
</template>

<script lang="ts">
import dayjs from 'dayjs';
import { useRouter } from "vue-router";
import { post } from '@/api/http'
import { getTableList } from '@/api/url'
import { usePagination, useRowKey, useTable, useTableColumn } from '@/hooks/table'
import { TablePropsType } from '@/types/components'
import { sortColumns } from '@/utils'
import { Message, Modal } from '@arco-design/web-vue'
import { defineComponent, onMounted, reactive } from 'vue'
export default defineComponent({
    name: 'TableCustom',
    setup() {
        const router = useRouter();
        const table = useTable()
        const pagination = usePagination(doRefresh)
        const rowKey = useRowKey('id')
        const tableColumns = reactive(
            useTableColumn([

                {
                    title: 'ID',
                    key: 'ID',
                    dataIndex: 'ID',
                },
                {
                    title: '字节线路名称',
                    key: 'linkName',
                    dataIndex: 'linkName',
                },
                {
                    title: '工单状态',
                    key: 'state',
                    dataIndex: 'state',
                },
                {
                    title: '故障级别',
                    key: 'level',
                    dataIndex: 'level',
                },
                {
                    title: '供应商',
                    key: 'vendor',
                    dataIndex: 'vendor',
                },
                {
                    title: '报障方式',
                    key: 'type',
                    dataIndex: 'type',
                },
                {
                    title: '报障人',
                    key: 'creator',
                    dataIndex: 'creator',
                },
                {
                    title: '负责人',
                    key: 'responser',
                    dataIndex: 'responser',
                },
                {
                    title: '创建时间',
                    key: 'creatTime',
                    dataIndex: 'creatTime',
                },
                {
                    title: '故障开始时间',
                    key: 'beginTime',
                    dataIndex: 'beginTime',
                }, {
                    title: '故障结束时间',
                    key: 'endTime',
                    dataIndex: 'endTime',
                },
                {
                    title: '操作',
                    key: 'operation',
                    dataIndex: 'operation',
                }
            ])
        )
        function doRefresh() {
            post({
                url: getTableList,
                data: () => {
                    return {
                        page: pagination.page,
                        pageSize: pagination.pageSize,
                    }
                },
            })
                .then((res) => {
                    console.log(res)
                    table.handleSuccess(res)
                    pagination.setTotalSize(res.totalSize)
                })
                .catch(console.log)
        }
        function Filter(faultLevel: number) {
            switch (faultLevel) {
                case 0:
                    return 'red'
                    break; /* 可选的 */
                case 1:
                    return 'orange'
                    break; /* 可选的 */
                case 2:
                    return 'purple'
                    break; /* 可选的 */
                case 3:
                    return 'blue'
                    break; /* 可选的 */
                case 4:
                    return 'green'
                    break; /* 可选的 */
                case 5:
                    return 'black'
                    break; /* 可选的 */
                default:
                    return 'white';
            }

        }
        function write(record: any) {
            console.log(record)
            router.push({
                path: "/form/base-form-view",
                params: {
                 record:record
                }
            });
        }
        function onSelect(dateString: any, date: any) {
            console.log('onSelect', dateString, date);
        }

        function onChange(dateString: any, date: any) {
            console.log('onChange: ', dateString, date);
        }

        function onOk(dateString: any, date: any) {
            console.log('onOk: ', dateString, date);
        }

        function onDeleteItem(item: any) {
            if (item) {
                Modal.confirm({
                    content: '是否要删除此数据，删除后不恢复？',
                    okText: '删除',
                    onOk: () => {
                        Message.success('模拟删除成功，参数为：' + item.id)
                    },
                })
            }
        }
        function onUpdateTable(newColumns: Array<TablePropsType>) {
            sortColumns(tableColumns, newColumns)
        }
        function onUpdateBorder(isBordered: boolean) {
            table.bordered.value = isBordered
        }
        function onUpdateStriped(isStriped: boolean) {
            table.striped.value = isStriped
        }
        function rowClassNameFun(_record: any, index: number) {
            return index % 2 === 1 && table.striped.value ? 'table-striped' : null
        }
        onMounted(doRefresh)
        return {
            ...table,
            rowKey,
            tableColumns,
            pagination,
            onUpdateTable,
            onDeleteItem,
            doRefresh,
            onUpdateBorder,
            onUpdateStriped,
            rowClassNameFun,
            onSelect,
            onChange,
            onOk,
            dayjs,
            Filter,
            write,
            useRouter
        }
    },
})
</script>

<style lang="less" scoped>
.avatar-container {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    vertical-align: middle;
    .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .avatar-vip {
        border: 2px solid #cece1e;
    }
    .vip {
        position: absolute;
        top: 0;
        right: -9px;
        width: 15px;
        transform: rotate(60deg);
    }
}
.gender-container {
    .gender-icon {
        width: 20px;
    }
}
</style>
<style scoped>
.line-menu {
    box-sizing: border-box;
    width: 100%;
    padding: 0px;
    background-color: var(--color-neutral-2);
}
.ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
}
</style>
